<template>
  <div>
    <!-- 2.在组件之间，填入你想显示的内容（填坑） -->
    <MyDialog>
      <!-- 通过template标签进行包裹，包裹的同时，指明插槽的名字 v-slot:插槽名 -> #插槽名 -->

      <template v-slot:title>温馨提示 </template>

      <template v-slot:content> 您确定要执行删除操作吗？ </template>

      <template v-slot:footer>
        <button>确定</button>
      </template>
    </MyDialog>

    <!-- v-slot: 可以简写成 # -->
    <MyDialog>
      <!-- 通过template标签进行包裹，包裹的同时，指明插槽的名字 v-slot:插槽名 -> #插槽名 -->

      <template #title>温馨提示 </template>

      <template #content> 您确定要执行删除操作吗？ </template>

      <template #footer>
        <button>确定</button>
      </template>
    </MyDialog>
  </div>
</template>

<script>
import MyDialog from './components/MyDialog.vue'
export default {
  data() {
    return {}
  },
  components: {
    MyDialog,
  },
}
</script>

<style>
body {
  background-color: #b3b3b3;
}
</style>